<template>
  <div class="ProductSerialNumber">
    <div class="cont">
      <div class="cont-left">
        <div class="BasicInformation">
          <div class="title">
            基本信息
          </div>
          <div class="info">
            <el-row :gutter="10">
              <el-col :span="10">
                <el-form-item label="工 单 I D ：">
                  <el-input :value='from.moco.fMoId' disabled/>
                </el-form-item>
              </el-col>
              <el-col :span="14">
                <el-form-item label="工单编号：">
                  <el-input :value="from.moco.fMocCode" disabled/>
                </el-form-item>
              </el-col>
              <el-col :span="10">
                <el-form-item label="产品编号：">
                  <el-input :value="from.moco.fInvCode" disabled/>
                </el-form-item>
              </el-col>
              <el-col :span="14">
                <el-form-item label="预计产量：">
                  <el-input :value="from.moco.fQty" disabled/>
                </el-form-item>
              </el-col>
              <el-col :span="10">
                <el-form-item label="产品品名：">
                  <el-input :value="from.moco.fInvName" disabled/>
                </el-form-item>
              </el-col>
              <el-col :span="14">
                <el-form-item label="产品规格：" prop="fOrgName">
                  <el-input :value="from.moco.fInvStd" disabled/>
                </el-form-item>
              </el-col>
              <el-col :span="24">
                <el-form-item label="规格描述：" prop="fOrgName">
                  <el-input :value="from.moco.fInvRemark" disabled/>
                </el-form-item>
              </el-col>
            </el-row>
          </div>
        </div>
        <div class="Principles">
          <div class="title">
            产品编码原则
          </div>
          <div class="info">
            <el-row :gutter="10">
              <el-col :span="7">
                编码前缀
              </el-col>
              <el-col :span="7">
                编码后缀
              </el-col>
              <el-col :span="4">
                开始序号
              </el-col>
              <!-- 							<el-col :span="5">
                              开始产量
                            </el-col>
                            <el-col :span="5">
                              结束产量
                            </el-col> -->
              <el-col :span="7">
                <el-form-item prop="fOrgCode">
                  <el-input v-model="from.codeInput.start"/>
                </el-form-item>
              </el-col>
              <el-col :span="7">
                <el-form-item prop="fOrgName">
                  <el-input v-model="from.codeInput.end"/>
                </el-form-item>
              </el-col>
              <el-col :span="4">
                <el-form-item>
                  <el-input v-model="from.codeInput.showStart"/>
                </el-form-item>
              </el-col>
              <el-col :span="5">
                <el-button @click="getSerial" type="primary" plain>获取</el-button>
              </el-col>
              <!-- 							<el-col :span="5">
                              <el-form-item>
                                <el-input-number v-model="from.codeInput.clStart" :min="0" :max="from.codeInput.clEnd" />
                              </el-form-item>
                            </el-col>
                            <el-col :span="5">
                              <el-form-item>
                                <el-input-number v-model="from.codeInput.clEnd" :min="from.codeInput.clStart" :max="from.moco.fQty" />
                              </el-form-item>
                            </el-col> -->
              <el-col :span="13">
                <el-form-item label="序号位置：" prop="fOrgCategory">
                  <el-select
                      :popper-append-to-body="false"
                      :teleported="false"
                      placeholder="请选择序号位置" style="width: 100%" v-model="from.codeInput.location">
                    <el-option v-for="item in [{l:'起始',v:-1},{l:'中间',v:0},{l:'最后',v:1}]" :key="item.v"
                               :label="item.l"
                               :value="item.v"/>
                  </el-select>
                </el-form-item>
              </el-col>
              <el-col :span="7">
                <el-form-item label="条码数量：" prop="count">
                 <el-input v-model="count"/>
                </el-form-item>
              </el-col>
              <el-col :span="11">
                <el-button type="primary" :disabled="(from.data.productNumbers.length>0)"
                           @click="(from.data.productNumbers>0)?'':quitCode()">确认编码
                </el-button>
                <el-button v-if="fids.length !== 0" type="danger" @click="(from.data.productNumbers>0)?'':qxAll()">
                  批量删除
                </el-button>
              </el-col>
            </el-row>
            <el-row :gutter="10">
              <el-col :span="24">
                <el-table :data="from.data.productNumbers" border style="width: 100%"
                          @selection-change="handleSelectionChange">
                  <el-table-column align="center" type="selection"></el-table-column>
                  <!-- <el-table-column prop="fMocNo" label="工单编号" width="120" /> -->
                  <el-table-column prop="fSeqNo" label="产品流水号" width="120"/>
                  <!-- <el-table-column prop="fSnBarCode" label="产品编号" /> -->
                  <el-table-column align="center" label="产品条码" #default="scope" width="320"
                                   :show-overflow-tooltip="true">
                    <el-input v-model="from.data.productNumbers[scope.$index].fSnBarCode" autocomplete="off">
                    </el-input>
                  </el-table-column>
                  <!-- <el-table-column prop="fMoId" label="工单ID" /> -->
                  <el-table-column fixed="right" align="center" label="操作" width="100">
                    <template #default="scope">
                      <el-button type="primary" @click="edit(scope)">
                        编辑
                      </el-button>
                    </template>
                  </el-table-column>
                </el-table>
              </el-col>
            </el-row>
          </div>
        </div>
      </div>
      <div class="cont-rit">
        <div class="ScanningInf">
          <div class="title">
            扫描信息
          </div>
          <div class="info">
            <el-row :gutter="10">
              <el-col :span="24">
                <el-form-item>
                  <el-input type="textarea" disabled :value='from.showTi.text'/>
                </el-form-item>
              </el-col>
              <el-col :span="24">
                <el-form-item label="扫描任务单号：" prop="fOrgName">
                  <el-input placeholder="请填充任务单号" autofocus v-model.trim="from.orderNum"
                            @keydown.enter="cx"/>
                </el-form-item>
              </el-col>
            </el-row>
          </div>
        </div>
        <div class="NotPushed">
          <!-- 					<div class="title" @click="test">
                      未推送任务明细
                    </div> -->
          <div class="info">
            <el-row :gutter="10">
              <el-col :span="24">
                <!-- 					<div class="table-head-botton">
                            <button>明细</button>
                            <button>未维护的任务令</button>
                          </div> -->
                <el-table :data="from.data.mocoRders" border style="width: 100%">
                  <el-table-column prop="num" label="序号" width="120"/>
                  <!-- <el-table-column prop="fMoId" label="工单单号" width="120" /> -->
                  <el-table-column prop="fMocCode" label="产品编号" width="120"/>
                  <!-- <el-table-column prop="fMoDId" label="子单单号" width="120" /> -->
                  <el-table-column prop="fQty" label="预计产量" width="120"/>
                  <el-table-column prop="fPtsQty" label="已产生条码数" width="120"/>
                  <el-table-column prop="fPtsRest" label="剩余条码数" width="120"/>
                  <el-table-column prop="fInvCode" label="产品品号" width="120"/>
                  <el-table-column prop="fInvName" label="产品名称" width="120"/>
                  <el-table-column prop="fInvStd" label="产品规格" width="140"/>
                  <el-table-column prop="fInvRemark" label="产品规格描述" width="120" :show-overflow-tooltip="true"/>
                  <!-- <el-table-column prop="" label="条码号" width="120" /> -->
                  <el-table-column prop="fProRemark" label="备注" width="170" :show-overflow-tooltip="true"/>
                </el-table>
              </el-col>
            </el-row>
          </div>
        </div>
      </div>
    </div>
  </div>
  <div class="footName">
    <!-- 		<el-row :gutter="10">
          <el-col :span="1.5">
            录入人：
          </el-col>
          <el-col :span="2">
            <el-form-item>
              <el-input />
            </el-form-item>
          </el-col>
          <el-col :span="2">
            <el-form-item>
              <el-input />
            </el-form-item>
          </el-col>
        </el-row> -->
  </div>
</template>

<script setup>
import ajax from '../../../../public/JavaScript/api/ajax.js';
import {onMounted, reactive, ref} from 'vue'
import {ElMessage, ElMessageBox} from 'element-plus';
import {get_code} from "@/api/product/product";
import {useRoute} from "vue-router";

let from = reactive({
  orderNum: '', //扫码单号
  data: {
    "mocoRders": [],
    "productNumbers": []
  },
  moco: {
    "fId": "",
    "fRemark": null,
    "fBookCode": null,
    "fState": 0,
    "fCreateUserId": "",
    "fCreatorTime": "",
    "fLastModifyUserId": "",
    "fLastModifyTime": "",
    "fAuditUserId": null,
    "fAuditorTime": null,
    "num": 0,
    "fMoId": '',
    "fMocCode": "",
    "fCreateTime": "",
    "fCreateUser": "",
    "fMoDId": '',
    "fMoTypeId": '',
    "fInvCode": "",
    "fInvName": "",
    "fInvStd": "",
    "fMoLotCode": "",
    "fWhCode": "",
    "fWhName": "",
    "fQty": 0,
    "fQualifiedInQty": 0,
    "fPreserveFlag": 0,
    "fCloseTime": null,
    "fInvRemark": ""
  },
  showTi: {
    type: false,
    text: ''
  },
  codeInput: {
    start: '',
    end: "",
    showStart: '',
    numPosition: '',
    location: 0,
    clStart: 0,
    clEnd: 0
  }
})

function getSerial() {
  const data = {
    fFront: from.codeInput.start,
    fLastStr: from.codeInput.end,
    location: from.codeInput.location,
  };
  get_code(data).then(res => {
    from.codeInput.showStart = res;
  });
}

function edit(ev) {
  ajax.post(`/pnc/upn?bar=${ev.row.fSnBarCode}&fId=${ev.row.fId}`, {}, res => {
    if (res.code === 200) {
      ElMessage.success('编辑成功！')
    } else {
      ElMessage.error(res.msg)
      cx()
    }
  }, err => {
    ElMessage.error(err)
    cx()
  })
}

onMounted(() => {

});
const restNum = ref();
const getCx = () => {
  ajax.post('/mrc/mcpn/' + from.orderNum, {}, res => {
    restNum.value = res.data.mocoRders[0].fPtsRest;
    if (res.code != 200) {
      from.showTi.text = res.msg
    } else {
      if (res.data.mocoRders == null) {
        from.showTi.text = "该任务单号数据为空！"
      } else {
        from.data = res.data
        from.codeInput = {
          start: res.data.productNumbers[0]?.fFront,
          end: res.data.productNumbers[0]?.fLastStr,
          showStart: res.data.productNumbers[0]?.fSeqNo,
          numPosition: '',
          location: res.data.productNumbers[0]?.num,
          clStart: 0,
          clEnd: 0
        }
        for (let i in res.data.mocoRders[0]) {
          from.moco[i] = res.data.mocoRders[0][i]
        }
      }
    }
    from.showTi.text = "";
    from.orderNum = '';
  }, err => {
    from.showTi.text = err
    console.log(err);
    ElMessage.error(err)
    from.showTi.text = "";
    from.orderNum = '';
  })
};

function cx() {
  if (from.orderNum.length < 1 || from.orderNum == '' || from.orderNum == null) {
    from.showTi.text = '任务单号不能为空！'
  } else {
    getCx();
  }
}
const count = ref();
function quitCode() {
  if (from.data.mocoRders.length < 1) {
    from.showTi.text = "数据为空！不能添加"
  } else {
    if (restNum.value < count.value) return from.showTi.text = "不能大于剩余量";
    ajax.post('/pnc/spn', {
      body: {
        "count": count.value,
        "fFront": from.codeInput.start,
        "fLastStr": from.codeInput.end,
        "location": from.codeInput.location,
        "mocoRders": from.moco,
        "startNo": from.codeInput.showStart
      }
    }, res => {
      if (res.code !== 200) {
        ElMessage.error(res.msg);
      } else {
        from.data.productNumbers = res.data;
      }
    })
  }
}

const fids = ref("");
const f = ref([]);
const handleSelectionChange = (val) => {
  f.value = [];
  f.value = val;
  // console.log(val);
  fids.value = "";
  let ids = "";
  // for (let i = 0; i < val.length; i++) {
    // ids += val[i].fId + ',';
  // }
  fids.value = val.map(item => item.fId);
};

const router = useRoute();

/* 取消所有 */
function qxAll() {
  ElMessageBox.confirm(
      '是否清除所有已编码?',
      '警告',
      {
        confirmButtonText: '是',
        cancelButtonText: '否',
        type: 'error',
      }
  )
      .then(() => {
      // return
        ajax.post('/pnc/bd', {body: fids.value}, res => {
          if (fids.value.length <= 0) {
            ElMessage.error("选项不能为空");
            return;
          }
          if (res.code === 200) {
            ElMessage.success('清除成功！');
            const ids = fids.value;
            from.data.productNumbers = from.data.productNumbers.filter((item, index) => {
              if (ids.indexOf(item.fId) === -1) {
                return item;
              }
            });
          } else {
            ElMessage.error(res.msg || '清除失败！')
          }
        })
      })
}

const tableData = [{
  date: '2016-05-03',
  name: 'Tom',
  address: 'No. 189, Grove St, Los Angeles',
},
  {
    date: '2016-05-02',
    name: 'Tom',
    address: 'No. 189, Grove St, Los Angeles',
  },
  {
    date: '2016-05-04',
    name: 'Tom',
    address: 'No. 189, Grove St, Los Angeles',
  },
  {
    date: '2016-05-01',
    name: 'Tom',
    address: 'No. 189, Grove St, Los Angeles',
  },
  {
    date: '2016-05-01',
    name: 'Tom',
    address: 'No. 189, Grove St, Los Angeles',
  },
  {
    date: '2016-05-01',
    name: 'Tom',
    address: 'No. 189, Grove St, Los Angeles',
  },
]
</script>

<style lang="less" scoped>
@import url("./ProductSerialNumber.less");
</style>
